<template>
    <my-swiper ref="mySwiper" :options="swiperOptions">
        <my-swiper-slide>
            <img src="@/assets/images/1.png" width="100%" alt="">
        </my-swiper-slide>
        <my-swiper-slide>
            <img src="@/assets/images/2.png" width="100%" alt="">
        </my-swiper-slide>
        <my-swiper-slide>
            <img src="@/assets/images/3.png" width="100%" alt="">
        </my-swiper-slide>
        <my-swiper-slide>
            <img src="@/assets/images/4.png" width="100%" alt="">
        </my-swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>

    </my-swiper>
</template>

<script>
export default {
    name: 'SwiperBannerView',
    data() {
        return {
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    // 如果需要前进后退按钮
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                loop: true,
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true
                },
                observer: true,
                observeParents: true
            }
        }
    }
}

</script>

<style></style>